<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/functionsLib.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 20;
    
    var g_tab_testInput = new Array(); 
    g_tab_testInput["titre"]=false; 
    var g_couleurFontBon = "#04B404";
    var g_couleurFontMauvais = "#FF0000";
    var g_couleurFontDefaut = "#333333";
    var g_couleurFontTips = "#a1a1a1";

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //Fin chargement page
    function OnLoad() {
        try {
            //
        } catch (er) {
            $.functionsLib.log(0, "ERROR(refreshG):" + er.message);
        }
    }
    
    /**
     * Pour l'écoute de la frappe sur le champ
     * 
     * @param {type} p_obj
     * @param {type} p_eventCode
     * @returns {undefined}
     */
    function ecoute(p_obj, p_eventCode) {
        try {

            switch (p_eventCode) 
            { 
                case 13: 
                    onblurInput(p_obj);
                    creerTournoi();
                    break; 
                default: 
                    onblurInput(p_obj);
                    break; 
            }
       } catch (er) {
            $.functionsLib.log(0, "ERROR(ecoute):" + er.message);
        }
    }

    /**
     * Quant le focus sort du champs
     * 
     * @param {type} p_obj
     * @returns {undefined}
     */
    function onblurInput(p_obj) {
        try {
            $("#tips_"+p_obj.name).text("");

            switch (p_obj.name) 
            {
                case "titre" : 
                    var Model=/^[a-zA-Z0-9._-]{2,}$/g;
                    var test = p_obj.value.match(Model);
                    if(test != null){
                        $("#label_"+p_obj.name).css("color", g_couleurFontBon);
                        g_tab_testInput[p_obj.name]=true;
                    }else{
                        $("#label_"+p_obj.name).css("color", g_couleurFontMauvais);
                        g_tab_testInput[p_obj.name]=false;
                    }
                    break;
                default: 
                    break; 
            }
            
            var boolControle = true;
            for(var indice in g_tab_testInput){
                if(g_tab_testInput[indice] == false){
                    boolControle = false;
                    break;
                }
            }
            if(boolControle){
                $("#BoutonCreerTournoi").removeClass('ui-disabled');
            }else{
                $("#BoutonCreerTournoi").addClass('ui-disabled');
            }
       } catch (er) {
            $.functionsLib.log(0, "ERROR(checkIntput):" + er.message);
        }
    }

    /**
     * Quant le focus rentre dans le champ
     * 
     * @param {type} p_obj
     * @returns {undefined}
     */
    function onfocusInput(p_obj) {
        try {
            $("#label_"+p_obj.name).css("color", g_couleurFontDefaut);
            $("#tips_"+p_obj.name).css("color", g_couleurFontTips);
            $("#msgRetour").text("");

            switch (p_obj.name) 
            {
                case "titre" :
                    $("#tips_"+p_obj.name).html("Que des caract&egrave;res et &agrave; minima de deux lettres.");
                    break;
                default: 
                    break; 
            }
       } catch (er) {
            $.functionsLib.log(0, "ERROR(onfocusInput):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * @name chargerExemple
     * @desc Hello
     * @param {type} nom
     * @return {type}
     */
    function creerTournoi() {
        try {
            var p_titre = $("#titre").val();
            
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, titre : p_titre };
            var json_retour = $.functionsLib.callRest(domaine+"phpsql/mysql_creerTournoi.php", {}, tabInput);
            if(json_retour["strErreur"] == ""){
                $.functionsLib.notification("Le tounoi n&deg;"+json_retour["data"]["resultat"]["id"]+" a bien &eacute;t&eacute; cr&eacute;&eacute;",$.functionsLib.oda_msg_color.SUCCES);
            }else{
                $.functionsLib.notification("Erreur pendant la cr&eacute;ation du tournoi.("+json_retour["strErreur"]+")",$.functionsLib.oda_msg_color.ERROR);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(creerTournoi):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS BD
    ///////////////////

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
</script>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./api_page_contact.html?mili='+$.functionsLib.getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" id="main_content">
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h4>Informations</h4>
                <label for="titre" id="label_titre" style="width: 75%">Saisir votre titre* :</label>
                <input type="text" name="titre" id="titre" value="" data-mini="true" placeholder="votre titre ici" onkeyup="ecoute(this, event.keyCode);" onblur="onblurInput(this);" onfocus="onfocusInput(this);"/>
                <label for="titre" id="tips_titre" style="width: 75%"></label>
                <a id="BoutonCreerTournoi" href="javascript:creerTournoi();" data-role="button" data-inline="true" data-mini="true" title="Cr&eacute;er" data-icon="check" class="ui-disabled">Cr&eacute;er</a>
                <label id="msgRetour"></label>
            </div>
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./api_page_faq.html?mili='+$.functionsLib.getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./api_page_sortie.html?mili='+$.functionsLib.getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>